<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle}">视频播放</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="/" class="logo">🎬 VideoTech</a>
            <ul class="nav-links">
                <li><a href="/">首页</a></li>
                <li><a href="/upload">上传</a></li>
                <li><a href="/search">搜索</a></li>
                <li><a href="/h2-console" target="_blank">数据库</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <div th:if="${video != null}" class="video-page">
                <!-- 视频播放器 -->
                <div class="video-player-container">
                    <video class="video-player" controls preload="metadata" th:src="@{'/api/video/stream/' + ${video.id}}">
                        您的浏览器不支持视频播放。
                    </video>
                    <div class="video-controls">
                        <div class="video-info-header">
                            <h1 class="video-title" th:text="${video.title}">视频标题</h1>
                            <div class="video-stats">
                                <span class="view-count" th:text="'👁 ' + ${video.viewCount} + ' 次观看'">👁 0 次观看</span>
                                <span class="upload-date" th:text="'📅 ' + ${#temporals.format(video.uploadTime, 'yyyy年MM月dd日')}">📅 2024年01月01日</span>
                                <span class="file-size" th:text="'💾 ' + ${video.fileSize != null ? (#numbers.formatDecimal(video.fileSize / 1024.0 / 1024.0, 1, 1) + ' MB') : '未知大小'}">💾 0 MB</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 视频描述 -->
                <div class="video-description-section" style="margin: 2rem 0;">
                    <div class="description-card" style="background: var(--card-bg); padding: 2rem; border-radius: 15px; border: 1px solid var(--border-color);">
                        <h3 style="color: var(--primary-color); margin-bottom: 1rem;">📝 视频描述</h3>
                        <p th:text="${video.description ?: '暂无描述'}" style="color: var(--text-secondary); line-height: 1.6;">暂无描述</p>
                        
                        <!-- 视频详细信息 -->
                        <div class="video-details" style="margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
                            <div class="detail-item" style="background: var(--darker-bg); padding: 1rem; border-radius: 10px;">
                                <div style="color: var(--primary-color); font-weight: 600;">文件名</div>
                                <div style="color: var(--text-muted); font-size: 0.9rem;" th:text="${video.fileName}">video.mp4</div>
                            </div>
                            <div class="detail-item" style="background: var(--darker-bg); padding: 1rem; border-radius: 10px;">
                                <div style="color: var(--primary-color); font-weight: 600;">状态</div>
                                <div style="color: var(--success-color); font-size: 0.9rem;" th:text="${video.status}">ACTIVE</div>
                            </div>
                            <div class="detail-item" style="background: var(--darker-bg); padding: 1rem; border-radius: 10px;" th:if="${video.duration != null}">
                                <div style="color: var(--primary-color); font-weight: 600;">时长</div>
                                <div style="color: var(--text-muted); font-size: 0.9rem;" th:text="${video.duration + ' 秒'}">0 秒</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 播放控制提示 -->
                <div class="playback-tips" style="background: var(--card-bg); padding: 1.5rem; border-radius: 10px; border: 1px solid var(--border-color); margin: 2rem 0;">
                    <h4 style="color: var(--primary-color); margin-bottom: 1rem;">⌨️ 快捷键</h4>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; color: var(--text-secondary); font-size: 0.9rem;">
                        <div><kbd style="background: var(--darker-bg); padding: 0.2rem 0.5rem; border-radius: 3px;">空格</kbd> 播放/暂停</div>
                        <div><kbd style="background: var(--darker-bg); padding: 0.2rem 0.5rem; border-radius: 3px;">← →</kbd> 快退/快进 10秒</div>
                        <div><kbd style="background: var(--darker-bg); padding: 0.2rem 0.5rem; border-radius: 3px;">↑ ↓</kbd> 音量调节</div>
                    </div>
                </div>
            </div>

            <!-- 相关视频 -->
            <div th:if="${relatedVideos and not #lists.isEmpty(relatedVideos)}" class="related-videos-section">
                <h2 style="color: var(--primary-color); margin: 3rem 0 2rem 0; font-size: 1.8rem;">🎬 相关视频</h2>
                <div class="video-grid">
                    <div class="video-card" th:each="relatedVideo : ${relatedVideos}" th:data-video-id="${relatedVideo.id}" th:if="${relatedVideoStat.count <= 6}">
                        <div class="video-thumbnail">
                            <div class="play-button">▶</div>
                            🎬
                        </div>
                        <div class="video-info">
                            <h3 class="video-title" th:text="${relatedVideo.title}">相关视频标题</h3>
                            <p class="video-description" th:text="${relatedVideo.description ?: '暂无描述'}">视频描述</p>
                            <div class="video-meta">
                                <span class="video-date" th:text="${#temporals.format(relatedVideo.uploadTime, 'yyyy-MM-dd')}">2024-01-01</span>
                                <span class="video-size" th:text="${relatedVideo.fileSize != null ? (#numbers.formatDecimal(relatedVideo.fileSize / 1024.0 / 1024.0, 1, 1) + ' MB') : '未知'}">0 MB</span>
                            </div>
                            <div class="video-meta">
                                <span th:text="'观看: ' + ${relatedVideo.viewCount}">观看: 0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 返回按钮 -->
            <div style="text-align: center; margin: 3rem 0;">
                <a href="/" class="btn btn-primary">返回首页</a>
                <a href="/upload" class="btn btn-secondary" style="margin-left: 1rem;">上传更多</a>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer style="background: var(--card-bg); padding: 2rem 0; margin-top: 3rem; border-top: 1px solid var(--border-color);">
        <div class="container" style="text-align: center; color: var(--text-muted);">
            <p>&copy; 2024 VideoTech Platform. 科技感十足的视频平台.</p>
        </div>
    </footer>

    <script th:src="@{/js/app.js}"></script>
    <script>
        // 视频播放页面特定功能
        document.addEventListener('DOMContentLoaded', function() {
            const video = document.querySelector('.video-player');
            
            if (video) {
                // 视频加载完成后的处理
                video.addEventListener('loadedmetadata', function() {
                    console.log('视频元数据加载完成');
                    console.log('视频时长:', video.duration, '秒');
                });

                // 播放错误处理
                video.addEventListener('error', function(e) {
                    console.error('视频播放错误:', e);
                    const errorMsg = document.createElement('div');
                    errorMsg.className = 'message error';
                    errorMsg.textContent = '视频加载失败，请刷新页面重试';
                    document.querySelector('.main-content').insertBefore(errorMsg, document.querySelector('.main-content').firstChild);
                });

                // 播放进度跟踪
                video.addEventListener('timeupdate', function() {
                    const progress = (video.currentTime / video.duration) * 100;
                    // 这里可以添加进度跟踪逻辑
                });

                // 全屏支持
                video.addEventListener('dblclick', function() {
                    if (video.requestFullscreen) {
                        video.requestFullscreen();
                    } else if (video.webkitRequestFullscreen) {
                        video.webkitRequestFullscreen();
                    } else if (video.msRequestFullscreen) {
                        video.msRequestFullscreen();
                    }
                });
            }
        });
    </script>
</body>
</html>
